<template>
  <view class="content">
    <!-- 顶部背景 -->
    <view class="top">
      <!-- 信息 设置 -->
      <view class="top_set d-flex jc-end ai-center">
        <i class="iconfont icon-xiaoxi"></i>
        <i class="iconfont icon-shezhi2"></i>
      </view>
      <!-- 信息卡片 -->
      <view class="card m0a box-shadow">
        <!-- 顶部头像 个人资料 -->
        <view class="top_avatar d-flex ai-center">
          <image src="../../static/logo.png" />
          <view class="name flex-1">前端小哥哥</view>
          <i class="iconfont icon-youjiantou1"></i>
        </view>
        <!-- 底部数据 -->
        <view class="bottom_data d-flex">
          <view class="bottom_item text-center">
            <view class="num">3</view>
            <view class="title">经验</view>
          </view>
          <view class="line"></view>
          <view class="bottom_item text-center">
            <view class="num">10</view>
            <view class="title">项目</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 菜单栏 -->
    <!-- 接口写完后拆成组件 根据数据来渲染 -->
    <view class="menus">
      <view
        class="menuitem d-flex ai-center"
        v-for="item in menu"
        :key="item.iconfont"
        @click="navigate(item.url,item.type)"
      >
        <i class="iconfont" :class="item.iconfont"></i>
        <i class="tit flex-1">{{item.tit}}</i>
        <i class="iconfont icon-youjiantou1"></i>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 菜单信息
      // type为1的话是tab页
      menu: [
        {
          iconfont: "icon-jianli",
          tit: "我的简历",
          url: "/pages/index/resume/index",
          type: 0,
        },
        {
          iconfont: "icon-wenzhang",
          tit: "我的文章",
          url: "/pages/Article/articleList/index",
          type: 1,
        },
        {
          iconfont: "icon-icon-project",
          tit: "我的项目",
          url: "/pages/index/project/index",
          type: 0,
        },
        {
          iconfont: "icon-bojuelvpaiicontilian_huabanfuben",
          tit: "天气预报",
          url: "/pages/index/weatherPre/index",
          type: 0,
        },
      ],
    };
  },
  methods: {
    navigate(url, type) {
      if (type == 1) {
        uni.switchTab({
          url: url,
        });
      } else {
        uni.navigateTo({
          url: url,
        });
      }
    },
  },
};
</script>

<style lang='scss'>
.top {
  width: 100%;
  height: 340rpx;
  background-color: #5290ff;
  .top_set {
    color: #ffffff;
    padding-top: 0.5em;
    padding-right: 0.5em;
    i {
      font-size: 48rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .icon-xiaoxi {
      margin-right: 0.8em;
    }
  }
  // 信息卡片
  .card {
    width: 90%;
    height: 358rpx;
    z-index: 1;
    background-color: #fff;
    margin-top: 70rpx;
    border-radius: 10rpx;
    .top_avatar {
      height: 65%;
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
      image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
      }
      .name {
        font-weight: bolder;
      }
    }
    .bottom_data {
      height: 45%;
      .bottom_item {
        width: 50%;
        .num {
          font-weight: bold;
        }
      }
    }
    .line {
      width: 1rpx;
      height: 70rpx;
      background-color: #cccccc;
      margin-top: 10rpx;
    }
  }
}
// 菜单
.menus {
  width: 100%;
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 7em;
  .menuitem {
    height: 90rpx;
    .iconfont {
      color: #5967c6;
      margin-right: 0.5em;
    }
    .tit {
      color: #101010;
    }
  }
}
</style>
